<template>
  <div class="search-btn-wrapper flhb wp100 hp100">
    <u-search
      v-model="searchData"
      class="wc64"
      shape="square"
      actionText="搜索"
      :actionStyle="{ color: '#356BEB', fontSize: '32rpx' }"
      :placeholder="placeholder"
      :placeholderStyle="{ fontSize: '32rpx' }"
      :searchIconSize="44"
      :animation="true"
      :height="64"
      @search="onSearch"
      @custom="onSearch"
      @clear="clearSearchValue"
    ></u-search>
    <view v-if="isFilter" class="flac w64 h64" @click="openFilterPop">
      <u-icon v-if="!filterShow" :name="`${info.baseUrl}/app/picture/filter.png`" color="#2979ff" size="40" />
      <u-icon v-else :name="`${info.baseUrl}/app/picture/filter-d.png`" color="#2979ff" size="40" />
    </view>
  </div>
</template>
<script>
import { baseInfo } from '@/baseInfo';
export default {
  props: {
    placeholder: { type: String, default: '' },
    isFilter: { type: Boolean, default: true },
    filterShow: { type: Boolean, default: false }
  },
  data() {
    return {
      info: baseInfo(),
      searchData: ''
    };
  },
  methods: {
    openFilterPop() {
      this.$emit('openFilterPop');
    },
    onSearch() {
      this.$emit('onSearch', this.searchData);
    },
    clearSearchValue() {
      this.searchData = '';
      this.$emit('clear', this.searchData);
    }
  }
};
</script>
<style lang="scss" scoped>
.search-btn-wrapper {
  #search-btn {
    width: calc(100% - 50px);
    border-radius: 20px;
    padding-left: 10px;
    color: rgb(178, 178, 178);
    background-color: #fff;
    height: 70%;
    ::v-deep .uni-input-wrapper {
      width: 80%;
    }
  }

  #search-btn:focus {
    background: #fff;
  }

  .icon-offline {
    margin-left: -40px;
    color: #ccc;
  }

  .button {
    width: 50px;
    background: rgb(241, 196, 15);
    color: #fff;
    border-radius: 20px;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
